<script setup lang="ts">
    import {ElCol, ElCard} from 'element-plus'
    import {reactive} from 'vue'
    import {ElDescriptions,ElDescriptionsItem} from 'element-plus'

    import {systemTableApi} from '@/api/asd/table'

    const data = reactive({})
    const getCount = async () =>{
        const res = await systemTableApi();
        if (res){
            data.value = res.data
        }
    }
    getCount();
</script>

<template>
    <ElCol :span="24">
        <ElCard shadow="hover" class="center-box">
            <template #header>
                <div class="card-header">
                    <span> 系统信息 </span>
                </div>
            </template>
            <ElDescriptions :column="1" border margin-left="100px;" v-for="(item,index) in data">
                <ElDescriptionsItem label="mysql版本号：">{{item.databaseMajorVersion}}</ElDescriptionsItem>
                <ElDescriptionsItem label="服务器名称：">{{item.serverName}}</ElDescriptionsItem>
                <ElDescriptionsItem label="端口号：">{{item.serverPort}}</ElDescriptionsItem>
                <ElDescriptionsItem label="服务器地址：">{{item.ip}}</ElDescriptionsItem>
                <ElDescriptionsItem label="操作系统：">{{item.os}}</ElDescriptionsItem>
                <ElDescriptionsItem label="java运行环境：">{{item.javaVen}}</ElDescriptionsItem>
                <ElDescriptionsItem label="IE名称：">{{item.ieName}}</ElDescriptionsItem>
                <ElDescriptionsItem label="IE版本：">{{item.ieVersionInfo}}</ElDescriptionsItem>
                <ElDescriptionsItem label="连接超时时间：">{{item.connectTimeOut}}</ElDescriptionsItem>
                <ElDescriptionsItem label="读取超时时间：">{{item.readTimeOut}}</ElDescriptionsItem>
                <ElDescriptionsItem label="上传大小限制：">{{item.maxSize}}</ElDescriptionsItem>
            </ElDescriptions>
        </ElCard>
    </ElCol>
</template>
<style lang="less" scoped>
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .center-box{
        margin-bottom: 20px;
    }
</style>
<style lang="less">
    /* 它本身边框的颜色 */
    .el-card__header{
        background-color: #F3F3F3;
        border-color: #C0C0C0;
    }
    /* 修改它本身的边距 */
    .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
        width: 1070px;
    }
    .el-descriptions__label.el-descriptions__cell.is-bordered-label {
        background: #fff;
    }
</style>



